<template>
    <div class="jianzhan-content">
        <crumb :name="$t('department.deptName')"></crumb>
        <div style="text-align: left;margin: 10px 0">
            <el-button type="primary" icon="el-icon-plus" @click="dialogVisible=true">{{$t('department.add')}}</el-button>
        </div>
        <div class="flex">
            <div class="flex-content f1">
                <div class="table-wrapper">

                </div>
            </div>
            <div class="flex-content f3">
                <div class="text-center">
                    <vue2-org-tree name="test"
                                   :data="data"
                                   :props="{
                                        label:'deptName',
                                        children:'deptList',
                                        expand:'expand'
                                   }"
                                   :horizontal="horizontal"
                                   :collapsable="false"
                                   selectedKey="deptId"
                                   :labelClassName="cls"
                                   selectedClassName="bg-blue"
                                   :renderContent="renderContent"
                                   @on-expand="onExpand"
                                   @on-node-click="onNodeClick"
                    ></vue2-org-tree>
                </div>
            </div>
        </div>
        <el-dialog
                :title="$t('department.deptName')"
                :visible.sync="dialogVisible"
                width="80%"
                >
            <el-form ref="form" :model="dept" label-width="120px">
                <el-form-item :label="$t('department.parentDept')">
                    <el-cascader
                            @change="change"
                            style="width: 250px"
                            :show-all-levels="false"
                            v-model="dept.parentId"
                            :options="data"
                            :props="{
                                checkStrictly:true,
                                value:'deptId',
                                label:'deptName',
                                children:'deptList'
                            }"
                    ></el-cascader>
                </el-form-item>
                <el-form-item :label="$t('department.deptName')">
                    <el-input v-model="dept.deptName" :placeholder="$t('department.deptName')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('department.remarks')">
                    <el-input v-model="dept.remarks" type="textarea" :placeholder="$t('department.remarks')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="submitForm">{{$t('confirm')}}</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import crumb from '../../components/common/crumb'
    import {addDepartment, deleteDepartmentId, getDepartmentList, modDepartment} from "../../api";
    import {ERROR_OK} from "../../util/config";
    export default {
        name: "department",
        components:{
            crumb
        },
        created(){
            this.getDepartment()
        },
        data() {
            return {
                data: {},
                dept:{
                    deptName:'',
                    remarks:'',
                    parentId:[],
                    deptId:''
                },
                dialogVisible:false,
                cls:'bg-chocolate'
            }
        },

        methods: {
            clear(){
                this.dept = {
                    deptName:'',
                    remarks:'',
                    parentId:[],
                    deptId:''
                }
            },
            change(val){
                console.log(val);
            },
            async getDepartment(){
                const {status,data} = await getDepartmentList();
                if(status === ERROR_OK)     {
                    this.data = data[0]
                }
            },

            renderContent(h, data) {
                return (
                    <el-dropdown >
                        <span class="el-dropdown-link white">
                        {data.deptName}
                        </span>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item  nativeOnClick={() => this.handleCommand('same',data)} >{this.$t('department.addSame')}</el-dropdown-item>
                            <el-dropdown-item  nativeOnClick={() => this.handleCommand('child',data)}>{this.$t('department.addChild')}</el-dropdown-item>
                            <el-dropdown-item  nativeOnClick={() => this.handleCommand('edit',data)}>{this.$t('edit')}</el-dropdown-item>
                            <el-dropdown-item  nativeOnClick={() => this.handleCommand('del',data)}>{this.$t('delete')}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                )
            },
            handleCommand(key,node){
                switch (key){
                    case 'same':
                        this.addSame(node);
                        break;
                    case 'child':
                        this.addChild(node);
                        break;
                    case 'edit':
                        this.edit(node);
                        break;
                    case 'del':
                        this.deleteDept(node);
                        break;
                }
            },
            addSame(node){
                if(!node.parentId) {
                    this.$message.error('不可添加顶级菜单的同级菜单')
                } else {
                    this.dialogVisible = true;
                    this.$set(this.dept,'parentId',node.parentId)
                }
            },
            addChild(node){
                this.dialogVisible = true;
                this.$set(this.dept,'parentId',node.deptId)
            },
            edit(node){
                this.dept = {
                    deptName:node.deptName,
                    deptId:node.deptId,
                    remarks:node.remarks
                };
                this.$set(this.dept,'parentId',node.parentId)
                this.dialogVisible = true;

            },
            async deleteDept(node){
                if(node.deptList && node.deptList.length) {
                    this.$message.error('改部门有子部门无法删除');
                    return
                }
                const {status} = await deleteDepartmentId(node.deptId);
                if(status === ERROR_OK) {
                    this.$message.success('删除成功');
                    this.getDepartment()
                }
            },
            async submitForm(){
                const {deptName,parentId,deptId,remarks} = this.dept;
                let pid;
                if(parentId && Array.isArray(parentId)){
                    pid = parentId[parentId.length-1]
                } else if(parentId){
                    pid= parentId
                }else {
                    this.$message.error('必须选择上级部门');
                    return
                }
                if(deptId){
                    const {status} = await modDepartment({
                        deptId,
                        deptName,
                        remarks,
                        parentId:pid
                    });
                    if(status === ERROR_OK) {
                        this.$message.success('修改成功');
                        this.getDepartment();
                        this.clear();
                        this.dialogVisible = false;
                    }
                }else {

                    const {status} = await addDepartment({
                        parentId:pid,
                        deptName,
                        remarks
                    });
                    if(status === ERROR_OK) {
                        this.$message.success('新增成功');
                        this.getDepartment();
                        this.clear();
                        this.dialogVisible = false;
                    }
                }

            },
            onExpand(e,data) {
                console.log(data);
                if ("expand" in data) {
                    data.expand = !data.expand;
                    if (!data.expand && data.children) {
                        this.collapse(data.children);
                    }
                } else {
                    this.$set(data, "expand", true);
                }
            },
            onNodeClick(e, data) {
                console.log(data);
                // alert(data.label);
            },
            collapse(list) {
                let _this = this;
                list.forEach(function(child) {
                    if (child.expand) {
                        child.expand = false;
                    }
                    child.children && _this.collapse(child.children);
                });
            },
            expandChange() {
                this.toggleExpand(this.data, true);
            },
            toggleExpand(data, val) {
                let _this = this;
                if (Array.isArray(data)) {
                    data.forEach(function(item) {
                        _this.$set(item, "expand", val);
                        if (item.children) {
                            _this.toggleExpand(item.children, val);
                        }
                    });
                } else {
                    this.$set(data, "expand", val);
                    if (data.children) {
                        _this.toggleExpand(data.children, val);
                    }
                }
            }
        },
    }
</script>

<style  lang="scss">

    .bg-chocolate{
        cursor: pointer !important;
        background: #409eff;
    }
    .white{
        color: white;
    }
    .bg-blue{
        background-color:#409eff;
    }
</style>